<template>
	<div>
		<el-row :gutter="25">
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">车架号:</p>
			</el-col>
			<el-col :span="3">
				<el-input size="small" v-model="vin" style="width:90%;" placeholder="请输入车架号">
				</el-input>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">车牌号:</p>
			</el-col>
			<el-col :span="3">
				<el-input size="small" v-model="platenum" placeholder="请输入查询内容">
				</el-input>
			</el-col>

			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">结算日期:</p>
			</el-col>
			<el-col :span="3">
				<el-date-picker v-model="balanceDate_start" size="small" style="width:100%;" type="date" clearable placeholder="结算开始日期">
				</el-date-picker>
			</el-col>
			<el-col :span="3">
				<el-date-picker v-model="balanceDate_end" size="small" style="width:100%;" type="date" clearable placeholder="结算结束日期">
				</el-date-picker>
			</el-col>
			<el-col :span="6" style="padding-left: 100px;text-align: left">
				<el-button type="primary" size="small" v-on:click="workorderQuery">查 询</el-button>
			</el-col>
		</el-row>
		<el-row>
				<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">工单号:</p>
			</el-col>
			<el-col :span="3">
				<el-input size="small" v-model="orderNum" placeholder="请输入查询内容">
				</el-input>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">区域:</p>
			</el-col>
			<el-col :span="3">
				<el-select v-model="area" size="small" placeholder="请选择区域" clearable @change="getCompanyInfo">
					<el-option v-for="item in areaCombo" :label="item.label" :value="item.code"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">品牌:</p>
			</el-col>
			<el-col :span="3">
				<el-select v-model="brand" size="small" placeholder="请选择品牌" clearable @change="getCompanyInfo">
					<el-option v-for="item in brandCombo" :label="item.label" :value="item.code"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">公司:</p>
			</el-col>
			<el-col :span="3">
				<el-select v-model="companyId" size="small" placeholder="请选择公司" clearable>
					<el-option v-for="item in companyCombo" :label="item.oName" :value="item.id"></el-option>
				</el-select>
			</el-col>
		</el-row>
		<el-row>
			<el-table :data="tableData.dataList" stripe border>
				<el-table-column prop="vin" label="vin" width="170">
				</el-table-column>
				<el-table-column prop="plateNum" label="车牌号" width="120">
				</el-table-column>
				<el-table-column prop="series" label="车系" width="120">
				</el-table-column>
				<el-table-column prop="model" label="车型" width="210">
				</el-table-column>
				<el-table-column prop="runMile" label="当前里程" width="100">
				</el-table-column>
				<el-table-column prop="orderNum" label="工单号" width="140" align="center">
				</el-table-column>
				<el-table-column prop="type" label="业务类型" width="100">
				</el-table-column>
				<el-table-column prop="maintainType" label="维修类型" width="100">
				</el-table-column>
				<el-table-column prop="balanceDate" label="结算日期" :formatter="balanceDates" width="150" align="center">
				</el-table-column>
				<el-table-column prop="maintainAmount" label="维修金额" width="100">
				</el-table-column>
				<el-table-column prop="balanceAmount" label="结算金额" width="100">
				</el-table-column>
				<el-table-column prop="realAmount" label="产值金额" width="100">
				</el-table-column>
				<el-table-column prop="openDate" label="开单日期" :formatter="openDates" width="150" align="center">
				</el-table-column>
				<el-table-column prop="receptor" label="接待人" width="90">
				</el-table-column>
			</el-table>
			<el-pagination small @current-change="pageChange" :current-page="curPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
			</el-pagination>
		</el-row>
	</div>
</template>

<script>
export default {
  data: function() {
    return {
      area: "",
      brand: "",
      brandCombo: [],
      //
      areaCombo: [],
      //
      companyCombo: [],
      //页码数
      curPage: 1,
      //每页的数量
      page: this.page,

      //车架号
      vin: "",
      //车牌号
      platenum: "",
      //工单号
      orderNum: "",
      //结算日期
      balanceDate_start: "",
      balanceDate_end: "",
      // 公司ID
      companyId: "",
      tableData: {
        total: 0,
        dataList: []
      }
    };
  },
  methods: {
    pageChange: function(change) {
      this.$data.curPage = change;
      this.workorderQuery();
    },
    //查询工单
    workorderQuery: function() {
      /*if(this.$data.companyId == "") {
					this.$message.error("请选择公司!");
				} else {*/
      if (
        this.$data.balanceDate_start != undefined &&
        this.$data.balanceDate_start != ""
      ) {
        this.$data.balanceDate_start = this.moment(
          this.$data.balanceDate_start
        ).format("YYYY-MM-DD");
      } else {
        this.$data.balanceDate_start = "";
      }
      if (
        this.$data.balanceDate_end != undefined &&
        this.$data.balanceDate_end != ""
      ) {
        this.$data.balanceDate_end = this.moment(
          this.$data.balanceDate_end
        ).format("YYYY-MM-DD");
      } else {
        this.$data.balanceDate_end = "";
      }

      this.$http({
        method: "GET",
        url: this.API_ROOT + "/crm/workorderquery/page",
        params: {
          start: this.$data.curPage,
          limit: this.$data.page.pageSize,
          //工单号
          orderNum: this.$data.orderNum,
          //车牌号
          platenum: this.$data.platenum,
          //车架号
          vin: this.$data.vin,
          //结算日期
          balanceDateStart: this.$data.balanceDate_start,
          balanceDateEnd: this.$data.balanceDate_end,
          companyId: this.$data.companyId
        }
      }).then(
        function(resp) {
          resp.data.total = parseInt(resp.data.total);
          this.$message(resp.data.msg);
          this.$data.tableData = resp.data;
        },
        function(error) {
          this.$message.error(resp.data.msg);
        }
      );
      //}
    },
    //结算日期转换
    balanceDates: function(row, column) {
      var date = row.balanceDate;
      debugger;
      if (date == "" || date == null) return "";
      return this.moment(date).format("YYYY-MM-DD");
    },
    //开单日期转换
    openDates: function(row, column) {
      if (row.openDate == "" || row.openDate == null) return "";
      return this.moment(Number(row.openDate)).format("YYYY-MM-DD");
    },
    //获取公司信息
    getCompanyInfo: function() {
      //this.$data.data.companyId = ""; //清空单位
      debugger;
      this.$http
        .get(this.API_ROOT + "/rbac/dept/all", {
          params: {
            area: this.$data.area,
            brand: this.$data.brand
          }
        })
        .then(resp => {
          debugger;
          this.$data.companyCombo = resp.data.dataList;
          if (this.$data.companyCombo.length > 0) {
            this.$data.companyId = this.$data.companyCombo[0].id;
          }
        });
    },
    //获取区域
    getarea: function() {
      debugger;
      this.$http
        .get(this.API_ROOT + "/rbac/dept/area/all", {
          params: {}
        })
        .then(resp => {
          this.$data.areaCombo = resp.data.dataList;
        });
    },
    //获取品牌
    getBrand: function() {
      debugger;
      this.$http
        .get(this.API_ROOT + "/rbac/dept/brand/all", {
          params: {}
        })
        .then(resp => {
          this.$data.brandCombo = resp.data.dataList;
        });
    }
  },
  created: function() {
    this.getarea();
    this.getBrand();
    this.getCompanyInfo();
    this.workorderQuery();
  }
};
</script>

<style>

</style>